<template>
  <!-- 企业管理 -->
  <div>
    <!-- 搜索区域保持不变 -->
    <div class="search-container">
      <span class="control-label">企业：</span>
      <el-input v-model="input" placeholder="请输入企业名称" class="control-item enterprise-input">
      </el-input>

      <span class="control-label">行业：</span>
      <el-input v-model="input" placeholder="请输入名称" class="control-item enterprise-input">
      </el-input>

      <span class="control-label">时间：</span>
      <div class="time-inputs control-item">
        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>

      <el-button type="primary" class="control-item">查询</el-button>
      <el-button type="success" class="control-item">重置</el-button>
    </div>

    <!-- 表格保持不变 -->
    <el-table :data="tableData" style="width: 100%; margin-top: 15px;" class="custom-header">
      <!-- 表格内容保持不变 -->
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="top">
            <el-row>
              <el-col :span="6">
                <el-form-item label="营业执照">
                  <span>{{ props.row.licenseUrl }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业码">
                  <span>{{ props.row.enterpriseCode }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="公司规模">
                  <span>{{ props.row.companySize }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column label="公司名称" prop="companyName"></el-table-column>
      <el-table-column label="所属行业" prop="industryName">
        <template slot-scope="scope">
          {{ scope.row.industryDO.industryName }}
        </template>
      </el-table-column>
      <el-table-column label="企业资质" prop="companyType"></el-table-column>
      <el-table-column label="公司地址" prop="companyAddress"></el-table-column>
      <el-table-column label="成立时间" prop="establishTime"></el-table-column>
      <el-table-column label="对企业的操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件保持不变 -->
    <el-pagination class="pagination-left" background layout="prev, pager, next" :total="1000">
    </el-pagination>

    <!-- 编辑弹窗 -->
    <el-dialog title="编辑企业信息" :visible.sync="dialogVisible" width="50%">
      <el-form :model="editForm" label-width="120px">
        <el-form-item label="公司名称">
          <el-input v-model="editForm.companyName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属行业">
          <el-input v-model="editForm.industryDO.industryName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="企业资质">
          <el-input v-model="editForm.companyType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司地址">
          <el-input v-model="editForm.companyAddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成立时间">
          <el-date-picker v-model="editForm.establishTime" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="营业执照">
          <el-input v-model="editForm.licenseUrl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="企业码">
          <el-input v-model="editForm.enterpriseCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司规模">
          <el-input v-model="editForm.companySize" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {selectAllCompanyInfo} from "@/api/company"
export default {
  data() {
    return {
      input: '',
      options: [
        { value: '选项1', label: '有效' },
        { value: '选项2', label: '过期' },
        { value: '选项3', label: '蚵仔煎' },
        { value: '选项4', label: '龙须面' },
        { value: '选项5', label: '北京烤鸭' }
      ],
      value: '',
      value1: '',
      tableData: [],
      dialogVisible: false, // 控制弹窗显示
      editForm: { // 编辑表单数据
        companyName: '',
        industryDO: {
          industryName: ''
        },
        companyType: '',
        companyAddress: '',
        establishTime: '',
        licenseUrl: '',
        enterpriseCode: '',
        companySize: ''
      }
    }
  },
  methods: {
    // 编辑按钮点击事件处理
    handleEdit(row) {
      // 打开弹窗并设置当前编辑的数据
      this.dialogVisible = true;
      // 使用对象展开运算符复制row数据到editForm
      this.editForm = {...row};
    },

    // 加载数据方法（接收查询条件参数）
    async loadData(params) {
      try {
        // 调用后端接口并传递查询条件
        const response = await selectAllCompanyInfo(params);
        console.log(response)
        // 假设接口返回的数据在response.data中
        this.tableData = response.data || [];
      } catch (error) {
        console.error("数据加载失败:", error);
        this.$message.error("加载数据失败，请稍后重试");
      }
    }
  },

   created() {
    // 页面初始化时加载数据（默认无查询条件）
    this.loadData({});
  },
}
</script>

<style scoped>
/* 原有样式保持不变 */
.enterprise-input {
  width: 250px;
}

.pagination-left {
  margin-top: 10px;
  text-align: left;
}

.custom-header ::v-deep .el-table th {
  height: 50px;
  line-height: 25px !important;
  padding: 0 !important;
}

.custom-header ::v-deep .el-table__header th {
  height: 70px;
  line-height: 25px !important;
  padding: 0 !important;
}

.search-container {
  display: flex;
  align-items: center;
  padding: 15px 0;
}

.control-item {
  margin-right: 15px;
}

.control-label {
  margin-right: 8px;
  white-space: nowrap;
}

.search-container> :last-child {
  margin-right: 0;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.el-table .cell {
  text-align: center;
}
</style>